import { useEffect, useState, useRef } from 'react';
import { Modal, Button } from 'antd';
import { WarningOutlined } from '@ant-design/icons';

import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

export default props => {
    const { showConfirm, confirmLoading, confirmTitle, confirmDesc, confirmWarn, onOk, onCancel } = props;
    const device = useDevice();

    return (
        <Modal
            title={null}
            footer={null}
            open={showConfirm}
            width={DEVICES.MOBILE === device ? 320 : 360}
            closable={false}
            maskClosable={false}
            className={styles['modal']}
            destroyOnHidden={true}
            classNames={{ body: styles['modal-body'] }}
        >
            <div className={styles['title']}>{confirmTitle||'--'}</div>
            <div className={styles['desc']}>{confirmDesc||'--'}</div>
            {
                confirmWarn ?
                    <div className={styles['warning']}>
                        <div className={styles['icon']}><WarningOutlined /></div>
                        <div className={styles['text']}>{confirmWarn||'--'}</div>
                    </div>
                    :
                    null
            }
            <div className={styles['action']}>
                <Button color="default" variant="filled" onClick={onCancel}>取消</Button>
                <Button type="primary" loading={confirmLoading} autoInsertSpace={false} onClick={onOk}>确认删除</Button>
            </div>
        </Modal>
    );
}